<template>
    <div class="box">
        <p class="title">单页导航{{pageName}}</p>
        <el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
            <el-form-item label="标题" prop="title">
                <el-input v-model="list.title"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sorting">
                <el-input v-model.number="list.sorting"></el-input>
            </el-form-item>
            <!-- <el-form-item label="连接地址" v-if="list.type==3">
        <el-input v-model="list.link"></el-input>
      </el-form-item> -->
            <el-form-item label="状态" prop="status">
                <el-select v-model.number="list.status"  placeholder="请选择">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="停用" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详情介绍" prop="content" >
                <el-input v-model="list.content" style="display:none"></el-input>
                <div id="editor"></div>
            </el-form-item>
            <el-form-item class="whole-handle-btn-box">
                <el-button type="primary" @click="handleCertain">确定</el-button>
                <router-link class="back-btn" to="index">
                    <el-button>返回</el-button>
                </router-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: {
            },
			pageName:'',
			pageType:1,
            rules: {
                title: { required: true, message: "标题不能为空", trigger: "change" },
                sorting: { required: true, message: "排序不能为空", trigger: "change" },
                // link: {required: true, message: '连接地址不能为空', trigger: 'change'},
                status: { required: true, message: "状态不能为空", trigger: "change" },
                type: { required: true, message: "类型不能为空", trigger: "change" }
            }
        };
    },
    created() {
        this.loadinEditor();
    },
    methods: {
		isAdd(){
			if(this.$route.query.type===2){
				this.list=this.$route.query.info;
				this.pageName='编辑';
				this.editor.txt.html(this.list.content);
			}else{
				this.pageName='新增';
			}
			this.pageType=this.$route.query.type;
		},
        // 加载富文本
        loadinEditor() {
            const _this = this;
            //获取分类列表
            let E = require("wangeditor");
            //加载富文本编辑器
            this.$nextTick(() => {
                var editor = new E("#editor");
                editor.customConfig.menus = [
                    "head", // 标题
                    "bold", // 粗体
                    "fontSize", // 字号
                    "fontName", // 字体
                    "italic", // 斜体
                    "underline", // 下划线
                    "strikeThrough", // 删除线
                    "foreColor", // 文字颜色
                    "backColor", // 背景颜色
                    "link", // 插入链接
                    "list", // 列表
                    "justify", // 对齐方式
                    "image", // 插入图片
                    "table", // 表格
                    "undo", // 撤销
                    "redo" // 重复
                ];
                editor.customConfig.uploadImgServer =
                    "http://api.zhonpay.com/admin/upload/upload";
                editor.customConfig.zIndex = 2;
                editor.customConfig.uploadFileName = "image";
                editor.customConfig.uploadImgHooks = {
                    customInsert: function (insertImg, result, editor) {
                        insertImg(result.content);
                    }
                };
                editor.customConfig.onchange = function (html) {
                    if (html === "<p><br></p>") {
                        html = "";
                    }
                    _this.$set(_this.$data.list, "content", html);
                };
                editor.customConfig.customAlert = function () { };
                editor.create();
                this.editor = editor;
				_this.isAdd();
            });
        },
        // 确定添加导航
        handleCertain() {
            const _this = this;
            this.$refs.form.validate(bool => {
                if (bool) {
                    this.$confirm("您确定要添加么?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            this.$axios({
                                url: "admin/home/setTopNav",
                                data: {
									tNavID:_this.pageType===2?_this.list.id:'',
                                    title: _this.list.title,
                                    sorting: _this.list.sorting,
                                    status: _this.list.status,
                                    type: 1,
                                    content:_this.list.content,
                                    url:NaN
                                },
                                success(res) {
                                    if (res.data.code === 200) {
                                        _this.$message({
                                            type: "success",
                                            message: res.data.msg
                                        });
                                        if(_this.pageType===2){
                                        	_this.$router.go(-1);
                                        }else{
                                        	_this.$refs.form.resetFields();
                                        	_this.$refs.upload.clearFiles();
                                        }
                                    } else {
                                        _this.$message({
                                            type: "warning",
                                            message: res.data.msg
                                        });
                                    }
                                }
                            });
                        })
                        .catch(() => { });
                }
            });
        },
    }
};
</script>

<style scoped>
.box {
    padding: 30px;
    width: 100%;
}
.el-form {
    width: 50%;
    margin: 0 auto;
}
.title {
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
}
.back-btn {
    margin-left: 10px;
}
#editor >>> .w-e-menu {
    padding: 0 8px;
}
</style>
